<template>

	<view class="form">
		<slot name="head" v-if="show">
			<view id="head_text">
				本平台不提供央行征信和个人爬虫等隐私数据查询，只提供大数据风险检测，不提供征信优化业务，也不提供放款等业务。
			</view>
		</slot>
		<uni-forms ref="form" :model="form" :rules="rules" label-align="center" :label-width="80">
			<uni-forms-item label="真实姓名" required name="name">
				<uni-easyinput v-model="form.name" placeholder="请输入姓名" />
			</uni-forms-item>
			<uni-forms-item label="身份证号" required name="cardNo">
				<uni-easyinput v-model="form.cardNo" placeholder="请输入身份证号" />
			</uni-forms-item>
			<uni-forms-item label="手机号码" required name="tel">
				<uni-easyinput type="text" v-model="form.tel" placeholder="请输入手机号(同时将接收查询报告短信链接)" />
			</uni-forms-item>
			<uni-forms-item label="验证码" required name="code">
				<uni-easyinput type="number" v-model="form.code" placeholder="请输入验证码"
					style="width: 60%;display: inline-block;" />
				<span @click="getVerifyCode" id="yzman"
					:style="{ backgroundColor: btnbg }">{{verifyCode.verifyCodeTips}}</span>
			</uni-forms-item>
		</uni-forms>
		<slot name="tips" v-if="show">
			<view id="head_tips">
				<img src="@/static/images/tips.png"> 本人对查询输入的三要素的真实性负责，如有虚假，愿承担由此产生的一切后果！
			</view>
		</slot>
		<view class="submit">
			<button @click="search()" type="primary" shape="round" :style="{ backgroundColor: btnbg }">
				立即查询
			</button>
			<view class="radio">
				<checkbox-group @change="xz = !xz">
					<checkbox :checked="xz"></checkbox>
				</checkbox-group>
				我已阅读同意
				<span @click="serveAgreeVisible=true" :style="{ color: btnbg }">《服务协议》</span>
				<span @click="authAgreeVisible=true" :style="{ color: btnbg }">《信息查询授权书》</span>
			</view>
		</view>
		<view class="ts flex">
			<view @click="goTem()" :style="{ color: textbg }">
				示例报告
			</view>
			<view @click="$tab.navigateTo('/pages/record')" :style="{ color: textbg }">
				历史查询
			</view>
		</view>
		<liu-drag-button @clickBtn="$tab.navigateTo('/pages/help')" :bottomPx="200" :rightPx="10">帮助</liu-drag-button>
		<!-- <liu-drag-button @clickBtn="kefu()" :bottomPx="140" :rightPx="10">客服</liu-drag-button> -->

		<serveAgree v-if="serveAgreeVisible" @readed="serveAgreeVisible=false" />
		<authAgree v-if="authAgreeVisible" :info="form" @readed="authAgreeVisible=false" />
	</view>
</template>

<script>
	import serveAgree from '@/components/serveAgree.vue'
	import authAgree from '@/components/authAgree.vue'

	import {
		sendVerifyCode
	} from '@/api/login'

	import {
		status
	} from '@/api/product.js'

	import {
		checkVerifyCode,
		addQuery
	} from '@/api/jinjian.js'

	import {
		resultPath
	} from '@/utils/common.js'

	export default {
		components: {
			serveAgree,
			authAgree
		},
		name: "keyword",
		props: {
			userId: {
				default: 1,
				type: String
			},
			productId: {
				required: true,
				type: Number
			},
			btnbg: {
				default: '#007aff',
				type: String
			},
			textbg: {
				default: '#375FE8',
				type: String
			},
			show: {
				default: true,
				type: Boolean
			}
		},
		data() {
			return {
				resultPath,
				serveAgreeVisible: false,
				authAgreeVisible: false,
				xz: false,
				id: undefined,
				form: {
					name: '',
					cardNo: '',
					tel: '',
					code: ''
				},
				verifyCode: {
					verifyCodeTips: "获取验证码",
					countdown: 60
				},
				onSearchIndex: 0,
				rules: {
					name: {
						rules: [{
							required: true,
							errorMessage: '请输入姓名'
						}]
					},
					cardNo: {
						rules: [{
							required: true,
							errorMessage: '请输入身份证号'
						}, {
							validateFunction: function(rule, value, data, callback) {
								const reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
								if (!reg.test(value)) {
									callback('请输入正确的身份证号')
								}
								return true
							}
						}]
					},
					tel: {
						rules: [{
							required: true,
							errorMessage: '请输入手机号码'
						}, {
							validateFunction: function(rule, value, data, callback) {
								const reg = /^1[3456789]\d{9}$/;
								if (!reg.test(value)) {
									callback('请输入正确的手机号码')
								}
								return true
							}
						}]
					}
				}
			}
		},
		created() {
			status(this.productId).then(res => {
				if (res.status != '0') {
					this.$modal.msgLoading(res.remark)
				}
			})
			// 定义事件,注意箭头函数应用
			this.$bus.$on('openReal', data => {
				this.$bus.$emit('sendInfo', this.form)
			});
			if (!localStorage.getItem('sign')) {
				localStorage.setItem('sign', this.userId + '_' + Date.now());
			}
			this.sign = localStorage.getItem('sign');
		},
		methods: {
			goTem() {
				this.$tab.navigateTo('/pages/' + ['', 'bdp', 'bd', 'com', 'mar', 'jud', 'imm', 'edu', 'mili'][this.productId])
			},
			getVerifyCode() {
				if (this.onSearchIndex != 0) {
					return
				}
				this.$refs.form.validate().then(res => {
					this.onSearchIndex = 1
					sendVerifyCode(this.form.tel).then(res => {
						if (res.code == 200) {
							// 验证码倒计时
							this.settime()
							this.$modal.msgSuccess(res.msg)
						}
					})
				}).catch(err => {
					console.error('表单错误信息：', err)
				})
			},

			settime() {
				if (this.verifyCode.countdown === 1) {
					this.verifyCode.countdown = 60
					this.onSearchIndex = 0
					this.verifyCode.verifyCodeTips = "获取验证码"
					return
				} else {
					this.verifyCode.countdown--
				}
				this.verifyCode.verifyCodeTips = "重新获取(" + this.verifyCode.countdown + ")"
				setTimeout(() => {
					this.verifyCode.verifyCodeTips = "重新获取(" + this.verifyCode.countdown + ")"
					this.settime()
				}, 1000)
			},

			search() {
				if (!this.form.code) {
					this.$modal.msgError("请输入验证码")
					return
				}
				if (!this.xz) {
					this.$modal.msgError("请勾选协议")
					return
				}
				this.$refs.form.validate().then(res => {
					checkVerifyCode({
						key: this.form.tel,
						code: this.form.code
					}).then(res => {
						if (res.code == 200) {
							// 记录入库
							let this_ = this
							addQuery({
								...this_.form,
								userId: this_.userId,
								productId: this_.productId,
								sign: this_.sign
							}).then(res => {
								if (res.code == 200) {
									this_.$tab.navigateTo('/pages/payLoading?id=' + res.data)
								} else {
									this_.$modal.msgError(res.msg)
								}
							})
						} else {
							this_.$modal.msgError(res.msg)
						}
					})
				})
			},
			kefu() {
				window.location.href = 'https://work.weixin.qq.com/kfid/kfc5aad73991502494d'
			}
		}
	}
</script>

<style scoped>
	.form {
		background-color: #fff;
		border-radius: 10px;
		padding: 20px 15px;
		margin: 0 0 14px;

		#yzman {
			background-color: #2979ff;
			padding: 3px;
			color: #fff;
			margin-left: 2px;
			border-radius: 4px;
		}

		.submit {
			text-align: center;
			padding-bottom: 5px;
			margin: 10px 0;

			.radio {
				display: inline-block;
				font-size: 12px;
				margin: 10px auto;

				span {
					color: #375FE8
				}
			}
		}

		.ts {
			font-size: 15px;
			justify-content: space-around;
			color: #375FE8;
		}

		.uni-forms-item[data-v-61dfc0d0] {
			position: relative;
			display: flex;
			margin-bottom: 20px;
			flex-direction: row;
		}

		uni-checkbox-group {
			display: inline
		}
	}

	#head_text {
		text-align: center;
		color: #FE6602;
		font-size: 12px;
		line-height: 17px;
		margin-bottom: 28px;
	}

	#head_tips {
		margin-top: 10px;
		font-weight: bold;
		align-items: start;

		img {
			width: 16px;
			height: 16px;
		}
	}
</style>